<!--
* description: 附件上传
-->
<template>
  <section class="editCarBrand">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="附件上传"
      :append-to-body="true"
      :visible.sync="showDialog"
      width="800px"
      @close="close"
    >
      <dialogHeader slot="title" title="附件上传" :styleType="$store.state.app.dialogType"></dialogHeader>
      <div class="filter-container filter-params">
        <el-row :gutter="26">
          <el-table
            :data="tableData"
            style="width: 100%"
            height="400"
            border
            v-loading="listLoading"
          >
            <el-table-column label="序号" width="60" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="附件名称" prop="FILE_NAME" align="center"></el-table-column>
            <el-table-column label="附件大小" prop="FILE_SIZE" align="center"></el-table-column>
            <el-table-column label="上传时间" prop="UPLOAD_TIME" align="center"></el-table-column>
            <el-table-column label="附件删除" align="center">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  class="el-icon-delete"
                  :underline="false"
                  @click="rowDelete(scope.row)"
                  title="删除"
                  style="font-size:12px;"
                >删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row :gutter="26" style="margin-top:15px;">
          <el-col :span="12">
            <label>附件：</label>
            <el-input v-model="fileData.fileUrl" readonly size="small" />
          </el-col>
          <el-col :span="12" style="text-align:left;">
            <el-upload
              ref="upload"
              class="upload-demo"
              action
              :http-request="handleChangeFile"
              name="uploadfile"
              :auto-upload="true"
              :before-upload="beforeAvatarUploadFile"
              :show-file-list="false"
              list-type="text"
            >
              <el-button>选择</el-button>
            </el-upload>
            <el-button style="margin-left:10px;" @click="saveUploadFile">上传</el-button>
            <el-button @click="close">取消</el-button>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from "@/components/wms/mixins/formMixins";
import request from "@/utils/request";
export default {
  // 组件混入对象
  mixins: [formMixins],
  components: {
    dialogHeader: () => import("@/components/dialogHeader") //弹窗标题
  },
  props: {
    isFileUploadShow: { type: Boolean, default: false },
    talbeRowData: { type: Object, default: {} }
  },
  data() {
    return {
      // 显示加载中
      listLoading: false,
      // 是否显示
      showDialog: this.isFileUploadShow,
      // 表格数据
      tableData: [],
      // 选中的数据
      checkTableList: [],
      fileData: {
        MATERIALS_STYLE_ID: this.talbeRowData.MATERIALS_STYLE_ID,
        fileUrl: "",
        fileName: "",
        filelSize: ""
      }
    };
  },
  created() {
    if (this.showDialog) {
      this.queryTable();
    }
  },
  methods: {
    rowDelete(row) {
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          request({
            url: "/mp/wm/vl/warehouse/materialsStyle/deleteUpload.do",
            method: "post",
            data: {
              UPLOAD_ID: row.UPLOAD_ID
            }
          }).then(res => {
            if (res.result === "1") {
              this.queryTable();
              this.$message({
                message: "删除成功",
                type: "success"
              });
            } else {
              this.$message({
                message: res.debugMsg ? res.debugMsg : res.msg,
                type: "warn"
              });
            }
          });
        })
        .catch(err => {
          console.info(err);
        });
    },
    saveUploadFile() {
      if (this.fileData.fileUrl) {
        request({
          url: "/mp/wm/vl/warehouse/materialsStyle/UploadMaterials.do",
          method: "post",
          data: this.fileData
        })
          .then(res => {
            if (res.result === "1") {
              this.$message({
                message: res.debugMsg ? res.debugMsg : res.msg,
                uration: 2000
              });
              this.fileData.fileUrl = "";
              this.fileData.fileName = "";
              this.fileData.filelSize = "";
              this.queryTable();
            } else {
              if (res.msg || res.debugMsg) {
                this.$message({
                  message: res.debugMsg ? res.debugMsg : res.msg,
                  uration: 2000
                });
              }
            }
          })
          .catch(err => {
            console.info(err);
          });
      } else {
        this.$message({
          message: "请先选择上传文件",
          type: "warning"
        });
      }
    },
    beforeAvatarUploadFile(file) {
      if (file.size > 50 * 1024 * 1024) {
        this.$message({
          message: "文件大小不能超过50M",
          type: "warning"
        });
        return false;
      }
      let fileType = file.name.substr(file.name.lastIndexOf(".") + 1);
      if (fileType != "png" && fileType != "jpg" && fileType != "jpeg") {
        this.$message({
          message: "只能导入后缀为jpg,png,jpeg的文件！",
          type: "warning"
        });
        return false;
      }
      return true;
    },
    handleChangeFile(param) {
      const loading = this.$loading({
        lock: true,
        text: "上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      const that = this;
      const url = "/mp/file/notice/upload.do";
      that
        .$requestUpload(url, param)
        .then(response => {
          if (response.result === "1") {
            loading.close();
            // this.$message({
            //   message: "",
            //   type: "success"
            // });
            this.fileData.fileUrl = response.path[0][0].split("|")[1];
            this.fileData.fileName = response.path[0][0].split("|")[0];
            this.fileData.filelSize = response.path[0][1];
          } else {
            this.$message({
              message: response.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          loading.close();
        });
    },
    close() {
      this.showDialog = false;
      this.$emit("fileUploadClose");
    },
    queryTable() {
      let reqData = {
        MATERIALS_STYLE_ID: this.fileData.MATERIALS_STYLE_ID
      };
      this.listLoading = true;
      request({
        url: "/mp/wm/vl/warehouse/materialsStyle/queryFile.do",
        method: "post",
        data: reqData
      })
        .then(res => {
          this.listLoading = false;
          if (res.result === "1") {
            this.tableData =
              res.listRow && res.listRow.length > 0 ? res.listRow : [];
          } else {
            if (res.msg || res.debugMsg) {
              this.$message({
                message: res.debugMsg ? res.debugMsg : res.msg,
                uration: 2000
              });
            }
          }
        })
        .catch(err => {
          console.info(err);
          this.listLoading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.dialogTitle {
  text-align: left;
  overflow: hidden;
}
.dialogTitleButton {
  float: right;
}
</style>